<template>
  <div>
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/exam/examManage' }">考试</el-breadcrumb-item>
        <el-breadcrumb-item>考试详情</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="grid">
        <div class="item basic-info">
          <div class="title"><i class="el-icon-s-order"></i>基本信息</div>
          <div class="text">名称：{{ exam.name }}</div>
          <div class="text">科目：{{ exam.subject }}</div>
          <div class="text">
            状态：{{ exam.status }}
            <el-link type="primary" v-if="exam.status === '未发布'" @click="releaseExamDialogVisible = true" style="margin-left: 10px">发布考试</el-link>
            <el-link type="primary" v-if="exam.status === '未开始'" @click="startExam(exam.id)" style="margin-left: 10px">开始考试</el-link>
            <el-link type="primary" v-if="exam.status === '进行中'" @click="finishExam(exam.id)" style="margin-left: 10px">结束考试</el-link>
          </div>
          <div class="text">开始时间：{{ exam.startTime }}</div>
          <div class="text">结束时间：{{ exam.endTime }}</div>
        </div>
        <div class="item paper">
          <div class="title"><i class="el-icon-tickets"></i>试卷信息</div>
          <div class="text">查看试卷：
            <el-link type="primary" v-if="hasPaper === true" @click="goToPaperDetail(exam.id, paper.id)" style="margin-right: 20px">试卷预览</el-link>
<!--            <el-link type="primary" v-if="hasPaper === true && exam.status === '未发布'" @click="goToPaper(exam.id)" style="margin-right: 20px">编辑试卷</el-link>-->
<!--            <el-link type="danger" v-if="hasPaper === true && exam.status === '未发布'" @click="deletePaperDialogVisible = true">删除试卷</el-link>-->
            <el-link type="primary" v-if="hasPaper === false" @click="addPaperDialogVisible = true">增加试卷</el-link>
          </div>
        </div>
        <div class="item student">
          <div class="title">
            <i class="el-icon-s-custom"></i>
            学生信息
            <el-link v-if="exam.status === '未发布'" style="margin-left: 20px" type="primary" @click="addStudentDialogVisible = true">增加学生</el-link>
          </div>
          <div class="studentTable">
            <div style="margin-left: 20px">
              <el-table
              :data="studentList"
              style="width: 100%">
              <el-table-column
                prop="name"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="studentNumber"
                label="学号"
                sortable>
              </el-table-column>
            </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  添加试卷  -->
    <el-dialog
      title="添加试卷"
      :visible.sync="addPaperDialogVisible"
      width="540px"
      center
      style="align-self: center">
      <el-form style="align-self: center" ref="form" :model="paperInfo">
        <el-form-item label="单选">
          <el-input-number v-model="paperInfo.radioTotal" :min="0" :max="20" label="题目数量"></el-input-number>道，每题
          <el-input-number v-model="paperInfo.radioScore" :min="0" :max="20" label="题目分值"></el-input-number>分
        </el-form-item>
        <el-form-item label="多选">
          <el-input-number v-model="paperInfo.multipleTotal" :min="0" :max="20" label="题目数量"></el-input-number>道，每题
          <el-input-number v-model="paperInfo.multipleScore" :min="0" :max="20" label="题目分值"></el-input-number>分
        </el-form-item>
        <el-form-item label="填空">
          <el-input-number v-model="paperInfo.fillingTotal" :min="0" :max="20" label="题目数量"></el-input-number>道，每题
          <el-input-number v-model="paperInfo.fillingScore" :min="0" :max="20" label="题目分值"></el-input-number>分
        </el-form-item>
        <el-form-item label="简答">
          <el-input-number v-model="paperInfo.shortTotal" :min="0" :max="20" label="题目数量"></el-input-number>道，每题
          <el-input-number v-model="paperInfo.shortScore" :min="0" :max="40" label="题目分值"></el-input-number>分
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addPaper">确 定</el-button>
      </span>
    </el-dialog>
    <!--  发布考试  -->
    <el-dialog
      title="提示"
      :visible.sync="releaseExamDialogVisible"
      width="30%"
      center
    >
      发布考试后，试卷和参加考试的学生均无法修改，您确定要发布吗？
      <span slot="footer" class="dialog-footer">
        <el-button @click="releaseExamDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="releaseExam(exam.id)">确 定</el-button>
      </span>
    </el-dialog>
<!--  删除试卷  -->
    <el-dialog
      title="提示"
      :visible.sync="deletePaperDialogVisible"
      width="30%"
      center
    >
      本操作无法撤销，确定删除试卷吗？
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletePaperDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="deletePaper">确 定</el-button>
      </span>
    </el-dialog>
<!--  添加学生  -->
    <el-dialog
      title="提示"
      :visible.sync="addStudentDialogVisible"
      width="30%"
      center>
      <el-form>
        <el-form-item label="学号">
          <el-input v-model="addStudentId"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addStudent">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getStudent,
  addPaper,
  getPaper,
  deletePaper,
  addStudent,
  examStart,
  examPause,
  examFinish,
  examRelease, getExamById
} from '../../../api/exam'
export default {
  name: 'ExamDetail',
  data () {
    return {
      // 发布考试
      releaseExamDialogVisible: false,
      // 删除试卷
      deletePaperDialogVisible: false,
      // 增加学生
      addStudentDialogVisible: false,
      // 增加试卷
      addPaperDialogVisible: false,
      paperInfo: {
        radioTotal: 10,
        radioScore: 2,
        multipleTotal: 10,
        multipleScore: 2,
        fillingTotal: 10,
        fillingScore: 2,
        shortTotal: 10,
        shortScore: 2
      },
      // 获取到的试卷信息
      paper: {
        id: 1,
        examId: 1,
        createTime: '',
        updateTime: '',
        scoreItemsJSONStr: '',
        questionList: []
      },
      // 增加试卷显示条件
      hasPaper: false,
      // 考试信息
      exam: {
        createTime: '2022-03-26 14:41:56',
        endTime: '2022-04-26 00:00:00',
        id: 1,
        name: '计算机网络2022期末考试',
        startTime: '2022-04-25 22:00:00',
        status: '未开始',
        subjectId: 1,
        teacherId: 1234567890,
        updateTime: '2022-03-26 14:41:56'
      },
      // 增加学生
      studentNumberList: [],
      addStudentId: '',
      // 学生名单
      studentList: [
        {
          name: '张三',
          studentNumber: 2019302110183
        },
        {
          name: '李四',
          studentNumber: 2019302110167
        }
      ]
    }
  },
  mounted () {
    this.exam = JSON.parse(this.$route.query.exam)
    this.getStudent()
    this.getPaper(this.exam.id)
    this.getStatus()
  },
  methods: {
    // 重新获取试卷状态
    getStatus () {
      getExamById(this.exam.id).then(res => {
        console.log(res.data)
        if (res.data.errorCode === 0) {
          this.exam.status = res.data.data.status
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 获取试卷
    getPaper (examId) {
      let that = this
      getPaper(examId).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.hasPaper = true
          that.paper = res.data.data.list[0]
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    // 为考试新增试卷
    addPaper () {
      let that = this
      let scoreItems = {
        firstGroup: {
          questionType: 'radio',
          score: that.paperInfo.radioScore,
          total: that.paperInfo.radioTotal
        },
        secondGroup: {
          questionType: 'multiple',
          score: that.paperInfo.multipleScore,
          total: that.paperInfo.multipleTotal
        },
        thirdGroup: {
          questionType: 'filling',
          score: that.paperInfo.fillingScore,
          total: that.paperInfo.fillingTotal
        },
        forthGroup: {
          questionType: 'shortAnswer',
          score: that.paperInfo.shortScore,
          total: that.paperInfo.shortTotal
        }
      }

      if (scoreItems.firstGroup.total * scoreItems.firstGroup.score +
        scoreItems.secondGroup.total * scoreItems.secondGroup.score +
        scoreItems.thirdGroup.total * scoreItems.thirdGroup.score +
        scoreItems.forthGroup.total * scoreItems.forthGroup.score !== 100) {
        this.$message.error('题目总分需要为100分！')
      } else {
        let paperInfo = {
          createTime: '',
          examId: that.exam.id,
          scoreItemsJSONStr: JSON.stringify(scoreItems),
          updateTime: ''
        }
        addPaper(paperInfo).then(res => {
          console.log(res)
          if (res.data.errorCode === 0) {
            that.$message.success('添加成功')
            that.addPaperDialogVisible = false
            that.getPaper(that.exam.id)
          } else {
            this.$message.error(res.data.message)
          }
        })
      }
    },
    // 删除考试试卷
    deletePaper () {
      let that = this
      deletePaper(this.exam.id).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.hasPaper = false
          that.deletePaperDialogVisible = false
          that.paper = {}
          that.$message.success('删除成功')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 跳转编辑试卷
    goToPaper (examId) {
      this.$router.push({path: '/exam/questionAdd', query: {examId: examId}})
    },
    // 跳转试卷预览
    goToPaperDetail (examId, paperId) {
      console.log(paperId)
      this.$router.push({path: '/exam/paper', query: {examId: examId, paperId: paperId}})
    },
    // 获取参加学生
    getStudent () {
      let that = this
      let info = {
        examId: this.exam.id,
        pageSize: 10,
        index: 0
      }
      getStudent(info).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.studentList = res.data.data.list
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    cancel () {
      this.addPaperDialogVisible = false
      this.addStudentDialogVisible = false
    },
    addStudent () {
      let that = this
      this.studentNumberList = [this.addStudentId.toString()]
      let info = {
        examId: this.exam.id,
        studentNumberList: this.studentNumberList
      }
      addStudent(info).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.studentList = res.data.data.list
          that.addStudentDialogVisible = false
          that.$message.success('添加成功！')
          that.getStudent()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 发布考试
    releaseExam (examId) {
      examRelease(examId).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.$message.success('考试已发布！')
          this.releaseExamDialogVisible = false
          this.getStatus()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 开始考试
    startExam (examId) {
      examStart(examId).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.$message.success('考试已开始！')
          this.getStatus()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 暂停考试
    pauseExam (examId) {
      examPause(examId).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.$message.success('考试已暂停！')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 结束考试
    finishExam (examId) {
      examFinish(examId).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          this.$message.success('考试已结束！')
          this.getStatus()
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
  .breadcrumb {
    padding: 20px;
  }

  .grid{
    margin: 20px;
    display: grid;
    grid-template-columns: 50% 50%;
    grid-auto-flow: row dense;
  }

  .item {
    text-align: left;
    border: 1px solid #e5e4e9;
  }

  .title {
    margin-top: 20px;
    margin-left: 20px;
    font-size: 20px;
    font-weight: bolder;
  }

  .text {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 20px;
    font-size: 15px;
  }

  .basic-info {
    height: auto;
    grid-column-start: 1;
    grid-column-end: 2;
  }

  .paper {
    height: auto;
    grid-column-start: 2;
    grid-column-end: 3;
  }

  .student {
    height: 400px;
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .studentTable {
    display: grid;
    grid-template-columns: 50% 50%;
  }
</style>
